{% extends "public/style1/common/base.html" %}
{% block title %}
联系我
{% endblock %}

{% block style_link %}
<link rel="stylesheet" href="/common/sweetalert2/sweetalert2.min.css"/>
<style>
    .comment .children {
        display: block;
    }
</style>
{% endblock %}

{% block content %}
<div class="crt-container-sm" id="contact-app">
    <div class="crt-paper-layers">
        <div class="crt-paper clear-mrg">
            <section class="section brd-btm padd-box">
                <h2 class="title-lg text-upper">朋友们</h2>
                <div class="row">
                    <div class="col-sm-12 clear-mrg">
                        <ul class="icon-list icon-list-col3 clearfix">
                            {% for friend_link in friend_links %}
                            <li>
                                <img class="avatar avatar-42" src="{{ friend_link.avatar }}" alt=""></a>
                                <a target="_blank" href="{{ friend_link.url }}">{{ friend_link.name }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </section>
                <div class="padd-box-sm" style="display: none;">
                <div class="tabs tabs-horizontal">
                    <ul class="tabs-menu">
                        <li id="tab-li-1" class="active">
                            <a href="#tab-hrz-1" @click="displayMessage">留言博主</a>
                        </li>
                        <li id="tab-li-2">
                            <a href="#tab-hrz-2" @click="displayFriendLink">友链申请</a>
                        </li>
                    </ul>
                    <div class="tabs-content">
                        <div id="tab-hrz-1" class="tab-conte..nt" style="display: block;">
                            {% if login_info.is_login %}
                            <div class="comment-respond">
                                <div class="padd-box-sm">
                                    <form class="comment-form" novalidate="">
                                        <div class="form-group">
                                            <label class="form-label" for="comment2">想说的</label>
                                            <div class="form-item-wrap">
                                                    <textarea v-model="comment.content" class="form-item"
                                                              cols="45"
                                                              rows="8"
                                                              maxlength="65525" aria-required="true"
                                                              required="required"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-submit form-item-wrap">
                                            <input @click="submitContact" class="btn btn-primary btn-lg"
                                                   type="button" value="提交">
                                        </div>
                                    </form>
                                </div>
                            </div>
                            {% else %}
                            <div class="comment-respond">
                                <h2 id="reply-title1" class="title text-upper">
                                    您还没有登录，登陆后即可评论
                                </h2>
                            </div>
                            {% endif %}
                        </div>
                        <div id="tab-hrz-2" class="tab-content" style="display: none;">
                            {% if login_info.is_login %}
                            <div class="comment-respond">
                                <div class="padd-box-sm">
                                    <form id="commentform2" class="comment-form" novalidate="">
                                        <div class="form-group">
                                            <label class="form-label" for="email">
                                                <span class="required">邮箱地址*</span>
                                            </label>
                                            <div class="form-item-wrap">
                                                <input v-model="friendLink.email" class="form-item" id="email"
                                                       type="email"
                                                       size="30"
                                                       maxlength="100" aria-describedby="email-notes"
                                                       aria-required="true"
                                                       required="required">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="author">
                                                <span class="required">网站名称*</span>
                                            </label>
                                            <div class="form-item-wrap">
                                                <input v-model="friendLink.name" class="form-item" id="author"
                                                       type="text"
                                                       size="30" maxlength="245" aria-required="true"
                                                       required="required">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="comment2">网站描述</label>
                                            <div class="form-item-wrap">
                                    <textarea v-model="friendLink.description" class="form-item" id="comment2" cols="45"
                                              rows="8"
                                              maxlength="65525" aria-required="true" required="required"></textarea>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="url">您的网站</label>
                                            <div class="form-item-wrap">
                                                <input v-model="friendLink.url" class="form-item" id="url"
                                                       value="" size="30" maxlength="200">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="url">网站图标</label>
                                            <div class="form-item-wrap">
                                                <input v-model="friendLink.avatar" class="form-item"
                                                       name="url"
                                                       value="" size="30" maxlength="200">
                                            </div>
                                        </div>
                                        <div class="form-submit form-item-wrap">
                                            <input @click="submitFriendLink" class="btn btn-primary btn-lg"
                                                   type="button" value="提交">
                                        </div>
                                    </form>
                                </div>
                            </div>
                            {% else %}
                            <div class="comment-respond">
                                <h2 id="reply-title2" class="title text-upper">
                                    您还没有登录，登陆后即可申请友链
                                </h2>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div id="comments" class="comments-area" style="display: none;">
                <h2 class="title text-upper">评论</h2>
                <div class="padd-box-sm">
                    <ol class="comment-list clear-list">
                        <li v-for="(item,index) in comments" :key="index" class="comment bypostauthor">
                            <article class="comment-body">
                                <header class="comment-header">
                                    <div class="comment-author vcard">
                                        <img alt=""
                                             :src="item.avatar"
                                             class="avatar avatar-58 photo"
                                             height="58" width="58">
                                        <strong class="fn">
                                            <a href="#" rel="external nofollow"
                                               class="url">
                                                {{ "{{ item.name }}" }}
                                            </a>
                                        </strong>
                                    </div>
                                    <div class="comment-date"> at <a href="#">
                                        <time datetime="">
                                            {{ "{{ item.time }}" }}
                                        </time>
                                    </a></div>
                                </header>
                                <div class="comment-content clear-mrg">
                                    <p>
                                        {{ "{{ item.content }}" }}
                                    </p>
                                </div>
                                <footer class="comment-footer">
                                    <div class="comment-replys-count">
                                        <a rel="nofollow"
                                           class="comment-replys-link"
                                           aria-label="Replys to Mr WordPress">
                                            {{ "{{ item.comments.length }}" }} 个回复
                                        </a>
                                    </div>
                                </footer>
                                {% if login_info.is_login %}
                                <footer v-if="isLogin" class="comment-footer">
                                    <div class="comment-links">
                                        <a class="comment-reply-link"
                                           rel="nofollow"
                                           href="#"
                                           @click="reply({{ 'item' }})"
                                           aria-label="Reply to Mr WordPress">
                                            回复
                                        </a>
                                    </div>
                                </footer>
                                {% endif %}
                            </article>
                            <ol v-for="(child,index) in item.comments" :key="index" class="children clear-list">
                                <li class="comment show-replies">
                                    <article class="comment-body">
                                        <header class="comment-header">
                                            <div class="comment-author vcard">
                                                <img alt=""
                                                     :src="child.avatar"
                                                     class="avatar avatar-58 avatar-default photo"
                                                     height="58"
                                                     width="58">
                                                <strong class="fn">
                                                    <a href="#"
                                                       rel="external nofollow" class="url">
                                                        {{ "{{ child.name }}" }}
                                                    </a>
                                                </strong>
                                            </div>
                                            <div class="comment-date"> at <a href="#">
                                                <time datetime="2016-07-04T11:33:08+00:00">
                                                    {{ "{{ child.time }}" }}
                                                </time>
                                            </a></div>
                                        </header>
                                        <div class="comment-content clear-mrg">
                                            <p>
                                                {{ "{{ child.content }}" }}
                                            </p>
                                        </div>
                                        {% if login_info.is_login %}
                                        <footer v-if="isLogin" class="comment-footer">
                                            <div class="comment-links">
                                                <a class="comment-reply-link"
                                                   rel="nofollow"
                                                   href="#"
                                                   @click="reply({{ 'child' }})"
                                                   aria-label="Reply to Mr WordPress">
                                                    回复
                                                </a>
                                            </div>
                                        </footer>
                                        {% endif %}
                                    </article>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block bottom_script %}
<script src="/admin/edit-md/lib/underscore.min.js"></script>
<script src="/common/sweetalert2/sweetalert2.min.js"></script>
<script>
    let contactApp = new Vue({
        el: '#contact-app',
        data: {
            friendLink: {
                email: '',
                name: '',
                description: '',
                url: '',
                avatar: ''
            },
            comment: {
                name: "",
                content: '',
                avatar: '',
                comments: [],
            },
            comments: [],
            isLogin: false,
        },
        methods: {
            reply(item) {
                this.popUpReplyWindow().then(result => {
                    this.submitReply(item, result).then(response => {
                        swal({
                            title: '评论完成',
                            text: "你的评论已提交，待管理员审核通过后，将会显示",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                    }).catch(error => {
                        alert("error")
                    })
                })
            },
            submitReply(item, message) {
                return request({
                    url: baseUrl + "/api/comment/save_comment",
                    method: 'post',
                    data: {"item": item, 'message': message, 'flag': false},
                })
            },
            popUpReplyWindow() {
                return swal({
                    title: '请输入评论',
                    input: 'text',
                    inputAttributes: {
                        autocapitalize: 'off'
                    },
                    showCancelButton: true,
                    confirmButtonText: '提交',
                    showLoaderOnConfirm: true,
                    allowOutsideClick: () => !swal.isLoading()
                });
            },
            getLoginInfo() {
                request({
                    url: baseUrl + "/api/login/info",
                    method: 'get',
                }).then(res => {
                    if (res === {}) {
                    } else {
                        this.isLogin = true;
                        this.friendLink.email = res.data.user.email;
                        this.comment.name = res.data.user.nick_name;
                        this.comment.avatar = res.data.user.avatar
                    }
                }).catch(e => {

                });
            },
            getContactComments() {
                request({
                    url: baseUrl + "/api/contact/comment",
                    method: 'get',
                    data: this.comment,
                }).then(res => {
                    if (res['code'] === 200) {
                        this.comments = res['data']
                    }
                }).catch(e => {
                    alert("提交评论失败")
                });
            },
            submitContact() {
                let comment = this.comment
                this.comments.unshift({...comment})
                request({
                    url: baseUrl + "/api/contact/comment",
                    method: 'post',
                    data: this.comment,
                }).then(res => {
                        if (res['code'] === 200) {
                        swal({
                            title: '评论完成',
                            text: "你的评论已提交等待管理员审核",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                    }
                }).catch(e => {
                    alert("提交评论失败")
                });
            },
            submitFriendLink() {
                request({
                    url: baseUrl + "/api/contact/friend_link",
                    method: 'post',
                    data: this.friendLink,
                }).then(res => {
                       if(res['code']===200){
                        swal({
                            title: '提交成功',
                            text: "你的友链已提交，待管理员审核",
                            confirmButtonText: '确认',
                            confirmButtonColor: 'Green',
                        })
                    }
                }).catch(e => {
                    swal({
                        title: '提交失败',
                        text: "你的友链未能提交，请重试",
                        confirmButtonText: '确认',
                        confirmButtonColor: 'Green',
                    })

                });
            },
            displayMessage() {
                $("#tab-hrz-1").css("display", "block");
                $("#tab-hrz-2").css("display", "none");
                $("#tab-li-1").addClass("active");
                $("#tab-li-2").removeClass("active");

            },
            displayFriendLink() {
                $("#tab-hrz-2").css("display", "block");
                $("#tab-hrz-1").css("display", "none");
                $("#tab-li-2").addClass("active");
                $("#tab-li-1").removeClass("active");
            }
        },
        created() {
            this.getLoginInfo();
            this.getContactComments();
            //$("#comments").css("display", "block");
        },
    });
</script>
{% endblock %}